<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>

<!--
1.容器与实例必须一对一，真是开发只有一个实例
2.{{}}中写js表达式   插值语法  用于标签体
3.v-bind:  简写为：   为属性绑定表达式   指令语法  用于标签属性
  用于解析标签（属性，标签体内容，绑定事件），有众多指令，v-开头
  v-model:value  简写为v-model
  v-bind单向绑定，从data流向页面
  v-model双向绑定，data流向页面，页面流向data
4.插值



mvvm模型
m：模型 model data中的数据
v：视图 view 模板代码 页面
vm:视图模型 viewmodel vue实例

data身上所有的属性，最终都会出现在vm身上
vm上所有的属性及vue原型上的所有属性，在vue模板中都可以使用

-->


<div id="root">
  <img src="../../img/数据代理.png">
  <h1>aaa,{{a}}</h1>
  <a v-bind:href="url">baidu</a>
  单向绑定：<input type="text" :value="vvv">
  双向绑定：<input type="text" v-model:value="vvv">
  <!--v-model只可用于表单类元素，有value值的元素-->
</div>

<script type="text/javascript">
 // Vue.config.productionTip = false;
  const vue = new Vue({
    el: '#root',/*el的两种写法，第一个是构造函数直接指定，第二种是vue.$mount("#root") */
    data: {
      a: 'sfasfsdfgsdgdsgdsdhfghdffff',
      url:'https://www.baidu.com',
      vvv:'单向绑定',
      v2:'双向绑定'
    }
  });
  //vue.$mount("#root")
</script>

</body>
</html>
